<template>
  <div id="app"></div>
</template>
            
  <script>
import * as PIXI from "pixi.js";
// import {OutlineFilter} from 'pixi-filter.js';
export default {
  setup() {
    let app = new PIXI.Application({
      width: window.innerWidth,
      height: window.innerHeight,
      backgroundColor: "#fed6e3",
      resolution: window.devicePixelRatio || 1,
    });

    // 搞个背景图片
    let sprite = PIXI.Sprite.from(require("./assets/imgs/bcsz.png"));
    sprite.width = 200;
    sprite.height = 200;
    sprite.x = 0;
    sprite.y = 0;

    //   定义一个模糊滤镜
    const filter = new PIXI.BlurFilter();
    // 滤镜的模糊度设置
    filter.blur = 10;
    // 给精灵添加一个模糊滤镜，因为一个精灵可能你不止想给他加一个滤镜，所以用数组的方式传值
    sprite.filters = [filter];
    // 可以通过鼠标的移入移出事件控制模糊度
    sprite.interactive = true;
    sprite.onmousemove = ()=>filter.blur = 0;
    sprite.onmouseleave = ()=>filter.blur = 10;
    app.stage.addChild(sprite);



    // 创建一个轮廓滤镜，注意这个滤镜不是pixi自带的，需要npm install pixi-filters，由于node版本问题，这里就不演示了
    // let outlineFilter = new OutlineFilter(5,0xffff00);//轮廓宽度、颜色
    
    // sprite.filters = [filter,outlineFilter]

    document.body.appendChild(app.view);
  },
};
</script>
            
      <style>
canvas {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}
</style>
            